<template>
	<view>
		<video :ref="`playVideoRef-${index}`" class="video" :id="`video-${index}`" :autoplay="true" :src="item.src"
			:title="info.name+' '+(item.title || '')" preload="meta" :muted="muted" :show-loading="true"
			:enable-progress-gesture="controls" :controls="controls" :show-center-play-btn="false"
			:style="{'height':height+'px'}" :play-strategy="2" :key="key" @waiting="onWaiting" @play="onPlay"
			@pause="onPause" @ended="onEnded" @error="onError" @timeupdate="onTimeupdate"
			@fullscreenchange="onFullscreenchange" @tap.stop="change">
		</video>
		<!-- 暂停时播放按钮 -->
		<view class="play-btn" :style="{left:`${width/2}px`,top:`${height/2}px`}" v-if="showPlayBtn">
			<image src="/static/play.png" style="height: 28rpx;width: 28rpx;"></image>
		</view>
		<!-- loading -->
		<image class="loading" :style="{left:`${width/2}px`,top:`${height/2}px`}" src="/static/loading.gif"
			v-if="loading"></image>
		<!-- 标题及小标题 -->
		<view class="info" @click.stop="$emit('showMulu')">
			<text class="text title">@{{info.name}}</text>
			<text class="text"
				style="margin-top: 25rpx;font-size: 26rpx;line-height: 40rpx;">{{item.des || '讲述温暖出行故事，描绘人间烟火，大锁与陈珂从原来的两条“平行线”，变成了感情不断升温的情侣...'}}</text>
			<view style="margin-top: 25rpx;line-height:44rpx;flex-direction: row;">
				<view class="des" style="flex-direction: row;align-items: center;">
					<text class="text">
						{{item.title || ''}} · 更新至第20集 · 已完结
					</text>
					<image src="/static/right.png" style="height: 16rpx;width: 16rpx;margin-left: 8rpx;"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 右侧按钮 -->
		<view class="btns" :style="{height:height+'px'}" @click.stop>
			<image class="toux" style="margin-bottom: 40rpx;" src="/static/tx.png"></image>
			<image class="btn" :src="isZan?'/static/dianzan_h.png':'/static/dianzan.png'" @click="isZan = !isZan">
			</image>
			<text class="text">0</text>
			<image class="btn" src="/static/pinglun.png" @click.stop="$emit('showPinglun')"></image>
			<text class="text">0</text>
			<image class="btn" :src="isSc?'/static/shoucang_h.png':'/static/shoucang.png'" @click="isSc = !isSc">
			</image>
			<text class="text">0</text>
			<image class="btn" src="/static/fenxiang.png?v=6"></image>
		</view>
		<!-- 进度条 -->
		<view class="progress">
			<view class="line" :style="{width:lineWidth+'px'}"></view>
		</view>
		<!-- 时间信息及静音按钮 -->
		<view class="duration" @click.stop>
			<view style="flex-direction: row;flex: 1;">
				<text class="text">{{currentTime?currentTime:'00:00'}}</text>
				<text class="text" style="margin: 0 10rpx;">/</text>
				<text class="text" style="opacity: .5;">{{duration?duration:'00:00'}}</text>
			</view>
			<image class="shengyin" :src="muted?'/static/jingyin.png':'/static/yinliang.png'"
				@click.stop="muted=!muted"></image>
			<image class="shengyin" style="margin-left:20rpx" src="/static/quanping.png" @click.stop="fullScreen">
			</image>
		</view>
	</view>
</template>

<script>
	// #ifndef MP-WEIXIN
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	// #endif
	export default {
		name: "o-video",
		model: {
			prop: 'value',
			event: 'input' // event 后的值必须是input,其他值无效。
		},
		props: {
			// 短剧信息
			info: {
				type: Object,
				default: () => {}
			},
			// 视频信息
			item: {
				type: Object,
				default: () => {}
			},
			// 下标
			index: {
				type: Number,
				default: -1
			},
			// 当前播放的第几项
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				width: systemInfo.screenWidth,
				height: systemInfo.screenHeight,
				key: new Date().getTime(),
				videoContext: null,
				showPlayBtn: false,
				loading: false,
				lineWidth: 0,
				currentTime: 0,
				duration: 0,
				muted: false,
				playing: true,
				isZan: false,
				isSc: false,
				controls: false,
				isFullscreen: false
			};
		},
		watch: {
			current: {
				handler(val) {
					val == this.index ? this.play() : this.pause()
				}
			},
			playing: {
				handler(val) {
					// 保持屏幕常亮
					uni.setKeepScreenOn({
						keepScreenOn: val
					});
				}
			}
		},
		mounted() {
			this.videoContext = uni.createVideoContext(`video-${this.index}`)
		},
		methods: {
			change() {
				if (!this.isFullscreen) {
					this.playing ? this.pause() : this.play()
				}
			},
			play() {
				this.videoContext.play()
			},
			pause() {
				this.videoContext.pause()
			},
			fullScreen() {
				this.videoContext.requestFullScreen()
			},
			onFullscreenchange(e) {
				this.isFullscreen = e.detail.fullScreen
				this.controls = e.detail.fullScreen
			},
			onEnded() {
				console.log("onEnded");
				this.currentTime = 0
				this.videoContext.exitFullScreen()
				this.$emit('ended')
				setTimeout(() => {
					this.key = new Date().getTime()
				}, 150)
			},
			onError() {
				console.log("onError");
				if (this.current == this.index) {
					uni.showToast({
						title: '播放失败',
						duration: 1000,
						icon: 'none'
					})
					setTimeout(() => {
						this.key = new Date().getTime()
						this.onEnded()
					}, 1000)
				}
			},
			onPlay() {
				if (this.current != this.index) {
					this.videoContext.pause()
					this.playing = false
				} else {
					this.playing = true
					this.showPlayBtn = false
					this.loading = false
				}
			},
			onPause() {
				this.showPlayBtn = true
				this.playing = false
			},
			onWaiting() {
				this.loading = true
			},
			onTimeupdate(e) {
				if (this.loading) this.loading = false
				if (!this.playing) this.playing = true
				if (!this.duration || this.duration == '00:00') this.duration = this.secondToTime(e.detail.duration, 1)
				this.currentTime = this.secondToTime(e.detail.currentTime)
				this.lineWidth = e.detail.currentTime / e.detail.duration * this.width
			},
			secondToTime(s, n) {
				const t = parseInt(s)
				const hours = Math.floor(t / (60 * 60));
				const seconds = t % (60 * 60)
				const minutes = Math.floor(seconds / 60);
				const seconds2 = seconds % 60
				if (hours > 0) {
					return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds2.toString().padStart(2, '0')}`;
				} else {
					return `${minutes.toString().padStart(2, '0')}:${seconds2.toString().padStart(2, '0')}`;
				}
			}
		},
	}
</script>

<style lang="scss">
	.video {
		width: 750rpx;
		background-color: #000000;
	}

	.text {
		color: #fff;
		font-size: 28rpx;
	}

	.info {
		position: absolute;
		z-index: 100;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding: 30rpx 140rpx 130rpx 30rpx;

		.title {
			font-size: 36rpx;
			max-width: calc(750rpx - 140rpx - 60rpx);
		}

		.des {
			background-color: rgba(255, 255, 255, .1);
			border-radius: 10rpx;
			padding: 15rpx 20rpx;

			.text {
				font-size: 24rpx;
			}
		}
	}

	.btns {
		position: absolute;
		z-index: 100;
		right: 0;
		bottom: 0;
		width: 140rpx;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 340rpx;

		.toux {
			height: 88rpx;
			width: 88rpx;
			border-radius: 50%;
			object-fit: cover;
			background-image: url('/static/empty.png');
		}

		.btn {
			height: 66rpx;
			width: 66rpx;
		}

		.text {
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			font-size: 26rpx;
		}
	}

	.play-btn {
		height: 68rpx;
		width: 68rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		margin-left: -34rpx;
		margin-top: -34rpx;
		align-items: center;
		justify-content: center;
		padding-left: 10rpx;
	}

	.loading {
		position: absolute;
		height: 60rpx;
		width: 60rpx;
		margin-left: -30rpx;
		margin-top: -30rpx;
	}

	.progress {
		width: 750rpx;
		height: 90rpx;
		position: absolute;
		left: 0;
		bottom: 0;

		.line {
			height: 2rpx;
			width: 500rpx;
			background-color: rgba(255, 255, 255, .35);
			transform: scaleY(.1);
		}

	}

	.duration {
		position: absolute;
		height: 88rpx;
		flex-direction: row;
		align-items: center;
		left: 0;
		width: 750rpx;
		bottom: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: rgba(255, 255, 255, .05);
	}

	.shengyin {
		height: 38rpx;
		width: 38rpx;
	}
</style>